<template>
    <slot name="nav"/>
    <slot name="header"/>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" rel="main">
            <slot name="main"/>
        </main>
        <slot name="bottom"/>
    </div>
    <Footer/>
</template>
<style scoped>
@media (min-width: 1152px) {
    .page-template-doc .site-header {
        position: fixed;
        right: 0;
        width: 45%;
        top: 0;
        margin: 0;
        border-radius: 0;
        height: 100%;
        animation: board-siteBG 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1;
        box-shadow: inset rgb(0 0 0 / 50%) 0.5rem 0 1rem 0;
    }

    .page-template-doc .content-area {
        width: 55%;
        position: relative;
        margin-left: 0;
        animation: board-entryBG 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1;
    }

    .page-template-doc .header-area .site-icon :not(.post-menu) {
        --s-color: hsl(0deg 0% 100% / 75%);
        --f-color: hsl(0deg 0% 0% / 75%);
        --s-shadow: var(--text-shadow);
    }

    .page-template-doc .nav-bg {
        background: #0000;
    }

    @keyframes board-entryBG {
        0% {
            left: -60%;
        }
        100% {
            left: 0;
        }
    }
    @keyframes board-siteBG {
        0% {
            width: 100%;
        }
        100% {
            width: 45%;
        }
    }
}
</style>
